<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS3 动态进度条</title>
  <style>
    .progress {
      width: 1000px;
      height: 100px;
      margin: 100px auto;
      background: linear-gradient(
        135deg,
        black 25%,
        transparent 25%,
        transparent 50%,
        black 50%,
        black 75%,
        transparent 75%
      );
      background-size: 100px 100px;

      animation: move 1s infinite linear;
    }

    @keyframes move {
      from {
        background-position: 0px 0;
      }
      to {
        background-position: 100px 0;
      }
    }


  </style>
</head>
<body>
<div class="progress"></div>
</body>
</html>